<!-- 20230203 -->
<template>
	<view class="bar-area-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 支付宝小程序 picker 组件不支持多列选择 -->
			<!-- <picker class="text-28" mode="multiSelector" bindchange="_bindRegionChange" :range="multiArray"
				:value="multiIndex" range-key="name" @columnchange="columnChange" @cancel @change="change">
				<view class="flex">
					<view class="flex-one text-28">
						<text v-if="district.province">{{district.province}} {{district.city}} {{district.area}}</text>
						<text class="text-b3" v-else>请选择所在地区</text>
					</view>
					<text class="tyIcon-arrow-right text-22 text-80"></text>
				</view>
			</picker> -->

			<view class="flex-one text-28 flex align-center" @click="show = true">
				<view class="flex-one">
					<text v-if="district.province">{{district.province}} {{columnsNum >= 2 ? district.city : ''}}
						{{columnsNum == 3 ? district.area : ''}}</text>
					<text class="text-aa" v-else>请选择产品分类</text>
				</view>
				<text class="margin-left-30 tyIcon-arrow-right text-22 text-4d"></text>
			</view>

		</view>
		<!-- 组件浮层 -->
		<view class="cn-layer">
			<popup v-if="show" @overlayClick="show = false">
				<view class="layer-content" @click.stop="">
					<view
						class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
						<view class="text-cc"></view>
						<view class="" style="color:#007aff;" @click="submit">确定</view>
					</view>
					<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view"
						@change="change">
						<picker-view-column>
							<view class="item" v-for="(item,index) in multiArray[0]" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column v-if="columnsNum >= 2">
							<view class="item" v-for="(item,index) in multiArray[1]" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column v-if="columnsNum == 3">
							<view class="item" v-for="(item,index) in multiArray[2]" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</popup>

		</view>
	</view>
</template>

<script>
	import popup from '@/components/pop-up.vue'
	export default {
		components: {
			popup
		},
		props: {
			// 行政规划省市区ID
			value: {
				type: Array,
				default: ['', '', '']
			},
			// X级地址，省市县
			columnsNum: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				// 省市区规划
				districtList: [],
				// 选中索引
				multiIndex: [0, 0, 0],
				// 行政规划数组
				multiArray: [],
				// 当前选中ID和名称
				district: {},
				// 选择框浮层是否显示
				show: false,
				indicatorStyle: 'height: 80rpx;',
				maskClass: 'mask'
			}
		},

		watch: {
			value(newVal) {
				console.log(123)
				// 获取当前选中行政规划索引
				this.getMultiIndex().then(res => {
					this.getMultiArray()
				})
			},
		},

		created() {
			if (!this.districtList.length) {
				this.$u.post('/api/shop/get_goods_category', {}).then(res => {
					if (res.code == 1) {
						this.districtList = res.data
						this.multiArray = [
							this.districtList,
							this.districtList[0].children,
							this.districtList[0]._child[0].children
						]
					}
				})
				// request.getData('base/district/api/District/getDistrict').then(res => {
				// 	if (res.code == 0) {
				// 		this.districtList = res.data.district_list
				// // 		// console.log(this.districtList)
				// // 		// console.log(this.districtList[0]._child)
				// // 		// console.log(this.districtList[0]._child[0]._child)
				// // 		// 行政规划初始值
				// 		this.multiArray = [
				// 			this.districtList,
				// 			this.districtList[0]._child,
				// 			this.districtList[0]._child[0]._child
				// 		]

				// // 		// 获取当前选中行政规划索引
				// 		this.getMultiIndex().then(res => {
				// 			this.getMultiArray()
				// 		})
				// 	}
				// })
			}
		},

		methods: {

			/**
			 * 获取当前选中行政规划索引
			 * @date 2023-02-03
			 */
			getMultiIndex() {
				return new Promise((resolve, reject) => {
					let multiIndex = Array.apply(null, Array(this.columnsNum)).map(() => 0),
						curProvinceList = [],
						curCityList = [],
						curAreaList = []

					// 行政规划没有加载完成
					if (!this.districtList.length) {
						resolve('')
					}

					// 是否有数据
					if (!this.value.length) {
						resolve('')
					}
					// 数据是否有效，即不为''
					let isDataEffective = true
					this.value.forEach((value, index) => {
						if (value == '') {
							isDataEffective = false
						}
					})
					if (!isDataEffective) {
						resolve('')
					}

					// 省ID
					for (var i = 0; i < this.districtList.length; i++) {
						if (this.districtList[i].id == this.value[0]) {
							multiIndex[0] = i
							curCityList = this.districtList[i]._child
							break;
						}
					}

					// 二级或三级推入城市列表
					if (this.columnsNum >= 2) {
						// 市ID
						for (var i = 0; i < curCityList.length; i++) {
							if (curCityList[i].id == this.value[1]) {
								multiIndex[1] = i
								curAreaList = curCityList[i]._child
								break;
							}
						}
					}

					// 三级推入地区列表
					if (this.columnsNum == 3) {
						for (var i = 0; i < curAreaList.length; i++) {
							if (curAreaList[i].id == this.value[2]) {
								multiIndex[2] = i
								break;
							}
						}
					}
					// 当前选中行政规划索引
					this.multiIndex = multiIndex
					resolve('')
				})
			},

			/**
			 * 获取当前选中行政规划索引
			 * @date 2023-02-03
			 */
			getMultiArray() {
				let multiArray = [],
					curProvinceList = [],
					curCityList = [],
					curAreaList = [],
					province, city, area, provinceId, cityId, areaId


				// 行政规划没有加载完成
				if (!this.districtList.length) {
					return false
				}

				multiArray.push(this.districtList)

				// 省ID
				let i = this.multiIndex[0]
				province = this.districtList[i].name
				provinceId = this.districtList[i].id
				curCityList = this.districtList[i]._child

				// 二级或三级推入城市列表
				if (this.columnsNum >= 2) {
					multiArray.push(curCityList)

					let i = this.multiIndex[1]
					city = curCityList[i].name
					cityId = curCityList[i].id
					curAreaList = curCityList[i]._child

					// 三级推入地区列表
					if (this.columnsNum == 3) {
						multiArray.push(curAreaList)

						let i = this.multiIndex[2]
						area = curAreaList[i].name
						areaId = curAreaList[i].id
					}
				}

				// 行政规划数组
				this.multiArray = multiArray

				// 当前选中ID和名称
				this.district = {
					// 省
					province: province,
					// 市
					city: city,
					// 区
					area: area,
					// 省ID
					province_id: provinceId,
					// 市ID
					city_id: cityId,
					// 区ID
					area_id: areaId
				}

				this.$emit("confirm", {
					multiIndex: this.multiIndex,
					province: this.district.province,
					city: this.district.city,
					area: this.district.area,
					province_id: this.district.province_id,
					city_id: this.district.city_id,
					area_id: this.district.area_id
				})
			},

			/**
			 * 下拉框选择变化
			 * @date 2023-02-03
			 */
			// columnChange(e) {
			// 	let column = e.detail.column

			// 	let multiIndex = this.multiIndex
			// 	if (column == 0) {
			// 		multiIndex[column] = e.detail.value
			// 		multiIndex[1] = 0;
			// 		multiIndex[2] = 0;

			// 	} else if (column == 1) {
			// 		multiIndex[column] = e.detail.value
			// 		multiIndex[2] = 0
			// 	} else if (column == 2) {
			// 		multiIndex[column] = e.detail.value
			// 	}
			// 	this.multiIndex = multiIndex

			// 	this.getMultiArray()
			// },

			/**
			 * 下拉框选择项改变
			 * @param {Object} e
			 * @date 2023-02-14
			 */
			change(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}

				this.getMultiArray()

				// this.$emit("confirm", {
				// 	multiIndex: e.detail.value,
				// 	province: this.district.province,
				// 	city: this.district.city,
				// 	area: this.district.area,
				// 	province_id: this.district.province_id,
				// 	city_id: this.district.city_id,
				// 	area_id: this.district.area_id
				// })
			},

			/**
			 * 确定
			 * @date 2023-02-14
			 */
			submit() {
				this.show = false
				// this.$emit("confirm", {
				// 	multiIndex: this.multiIndex,
				// 	province: this.district.province,
				// 	city: this.district.city,
				// 	area: this.district.area,
				// 	province_id: this.district.province_id,
				// 	city_id: this.district.city_id,
				// 	area_id: this.district.area_id
				// })
			}
		}
	}
</script>

<style scoped>
	@import url(common.css);
	
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
		z-index: 999;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
		z-index: 999;
	}

	.item {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>